<template>
  <div class="mv-box">
    <ul class="mv-list" v-if="videoList !== undefined && videoList.length > 0">
      <li
        v-for="(item, index) of videoList"
        :key="item.videoId || item.catalogueId"
        :class="item.isLive ? 'live' : ''"
      >
        <div
          class="cover"
          @click.capture="isMobile && showAction(index)"
          :class="{ 'cover-hover': !isMobile }"
        >
          <div class="image">
            <el-image
              :key="diff === 'theater' ? item.imgList : item.imgUrl"
              :src="diff === 'theater' ? item.imgList : item.imgUrl"
              fit="fill"
            >
              <div
                slot="placeholder"
                class="image-slot flex-center flex-column"
              >
                <i class="iconfont el-icon-loading"></i>
              </div>
              <div slot="error" class="image-slot flex-center">
                <img src="@/assets/images/defaultCover.png" />
              </div>
            </el-image>
            <!-- @change="SelectionChange" -->
            <el-checkbox
              class="isCheck"
              v-if="isCheck"
              :label="item.videoId"
              :key="item.videoId"
              >&nbsp;</el-checkbox
            >
          </div>
          <!-- <div class="count">
            <i class="arrow"></i>
            <span>{{ utils.tranNumber(item.playCount, 0) }}</span>
          </div> -->
          <!-- @click="toDetail(item.id, item.type)" -->
          <div class="action">
            <button
              class="play flex-center"
              :title="$t('public.play')"
              v-if="!item.isLive"
              @click="toDetail(item.videoId ? item.videoId : item.catalogueId)"
            >
              <svg-icon
                name="video-play"
                class="icon icon-video-play"
              ></svg-icon>
            </button>
            <button
              class="play flex-center"
              :title="$t('public.play')"
              v-else
              @click="toLive(item.id)"
            >
              <svg-icon
                name="video-play"
                class="icon icon-video-play"
              ></svg-icon>
            </button>
          </div>
          <!-- <div class="foot">
            <p>{{ item.name }}</p>
            <p>{{ item.duration }}</p>
          </div> -->
        </div>
        <div
          class="info ellipsis-two"
          @click="toDetail(item.videoId ? item.videoId : item.catalogueId)"
        >
          <h2
            class="title"
            v-text="$i18n.locale === 'zh' ? item.cname || item.name : item.name"
          ></h2>
        </div>
        <ul v-if="diff === 'theater'" class="theater-info">
          <li
            :data-name="$t('main.performanceType') + '：'"
            v-text="item.typeName || $t('public.noInformation')"
          ></li>
          <li
            :data-name="$t('main.performanceTheater') + '：'"
            v-text="item.theatreName || $t('public.noInformation')"
          ></li>
        </ul>
      </li>
    </ul>
    <div v-if="loading" class="load-bottom">
      <nice-loading />
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import { mapActions } from "vuex";
export default {
  data() {
    return {
      isAction: false,
    };
  },
  props: {
    videoList: {
      type: Array,
    },
    loadStatus: {
      type: Boolean,
    },
    loading: {
      type: Boolean,
    },
    type: {
      type: String,
    },
    // 是否显示选择框
    isCheck: {
      type: Boolean,
      default: false,
    },
    diff: {
      type: String,
      default: "video",
    },
  },
  components: {},
  computed: {
    isMobile() {
      return this.$store.getters.isMobile;
    },
    // noMore() {
    //   return !this.loading;
    // },
    // disabled() {
    //   return this.loading || this.noMore;
    // },
  },
  watch: {},
  methods: {
    // 复选框
    // SelectionChange() {
    //   this.$emit("childCheck");
    // },
    // 直播跳转
    toLive(id) {
      let url = `https://iplay.163.com/live?id=${id}`;
      window.open(url, "_blank");
    },
    // 视频详情
    toDetail(id) {
      // if (!this.$store.getters.loginStatu) {
      //   this.$store.commit("SET_DIALOGLOGIN", true);
      //   return;
      // }
      this.stopPlay();
      // if (typeof id == "number" || id.length < 10) {
      //   this.$router.push({
      //     name: "mvDetail",
      //     params: {
      //       id,
      //     },
      //   });
      // } else {
      if (this.diff === "video") {
        this.$router.push({
          name: this.isMobile ? "mVideoDetail" : "videoDetail",
          params: {
            id,
          },
        });
      } else if (this.diff === "theater") {
        this.$router.push({
          name: "theaterDetail",
          params: {
            id,
          },
        });
      }
      // }
    },
    // 移动端点击显示action
    showAction(idx) {
      $(".cover").removeClass("cover-hover");
      $(".cover").eq(idx).addClass("cover-hover");
    },
    ...mapActions([
      // 播放视频移除播放
      "stopPlay",
    ]),
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
.mv-box {
  // padding: 15px 0;
  .mv-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
    // overflow: auto;
    > li {
      margin-bottom: 25px;
      padding: 0 15px;
      flex: 0 0 33.33%;
      max-width: 33.33%;
      .cover {
        position: relative;
        z-index: 2;
        padding-top: 56%;
        border-radius: 2px;
        background-color: #000;
        .el-image {
          position: absolute;
          top: 0;
          left: 0;
          overflow: hidden;
          width: 100%;
          height: 100%;
          border-radius: 2px;
        }
        .isCheck {
          position: absolute;
          top: 10px;
          left: 10px;
        }
        // .count {
        //   position: absolute;
        //   right: 16px;
        //   top: 1px;
        //   height: 24px;
        //   padding-left: 9px;
        //   background: url(https://img.alicdn.com/tfs/TB1xEGRub9YBuNjy0FgXXcxcXXa-268-48.png)
        //     no-repeat 0;
        //   background-size: cover;
        //   color: #fff;
        //   font-size: 12px;
        //   font-weight: 700;
        //   line-height: 24px;
        //   display: flex;
        //   align-items: center;
        //   justify-content: center;
        //   .arrow {
        //     display: block;
        //     width: 0;
        //     height: 0;
        //     border-style: solid;
        //     border-width: 4px 0 4px 6px;
        //     border-color: transparent transparent transparent #ffffff;
        //     margin-right: 5px;
        //   }
        //   &:after {
        //     content: "";
        //     position: absolute;
        //     right: -14px;
        //     top: 0;
        //     width: 14px;
        //     height: 24px;
        //     background: url(https://img.alicdn.com/tfs/TB1xEGRub9YBuNjy0FgXXcxcXXa-268-48.png)
        //       no-repeat 100%;
        //     background-size: cover;
        //   }
        // }
        .action {
          width: 100%;
          height: 100%;
          display: none;
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          background: rgba($color: #000000, $alpha: 0.5);
          .play {
            width: 40px;
            height: 40px;
            margin: auto;
            padding: 0;
            border: none;
            border-radius: 50%;
            color: #fff;
            cursor: pointer;
            background: rgba($color: #000000, $alpha: 0.2);
            .icon {
              font-size: 40px;
            }
          }
        }
        .foot {
          width: 100%;
          height: 35px;
          background: rgba(0, 0, 0, 0.6);
          position: absolute;
          left: 0;
          bottom: 0;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 10px;
          p {
            color: #ffffff;
          }
        }
        &.cover-hover {
          &:hover {
            .action {
              display: flex;
            }
          }
        }
      }
      .info {
        margin-top: 10px;
        cursor: pointer;
        .title {
          font-size: 16px;
          // font-weight: 500;
          display: block;
          // line-height: 1.3;
        }
        .author {
          margin-top: 5px;
          font-size: 16px;
          color: #999;
        }
      }
      .theater-info {
        li {
          color: #bbbbbb;
          margin-top: 5px;
          &::before {
            content: attr(data-name);
          }
        }
      }
      &.live {
        .cover {
          .foot {
            background: rgba(250, 40, 0, 0.75);
          }
        }
      }
    }
  }
}
</style>
